{include file='/public/index-header'}
<body>
    {include file='/public/index-nav'}
    <div class="layui-row" style="padding-top: 70px;background: linear-gradient(90deg, #eaf8fd, #fbfeff);">
        <div class="layui-row layui-container">
            <div class="layui-col-md12" style="display: flex;">
                <div class="ml40" style="font-size: 27px;">
                    <strong class="" >{$info.title|default=''}</strong>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="contentWrap ml40">
                    <div class="contentLeftWrap">
                        <div class="mr30">
                            <span>关卡</span><p class="mt3">{$info['chapter_total']|default=''}</p>
                        </div>
                        <div class="mr30">
                            <span>分数</span><p class="mt3">{$info['gold_total']|default=''}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-container ws-container">

        <div class="layui-row">
            <div class="layui-col-md8">
                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                      <li class="layui-this" lay-id="chapterList" style="font-size: 15px;">任务</li>
                    </ul>
                    <div class="layui-tab-content">
                      <div class="layui-tab-item layui-show" id="chapterList">
                        <div class="layui-row layui-col-space15">
                            <div class="layui-col-md12">
                              <div class="layui-card">
                                <div class="layui-card-header" style="margin-top: 20px;">任务介绍</div>
                                <div class="layui-card-body markdown-body">
                                    {$info.details|raw|default=''}
                                </div>
                              </div>
                            </div>
                            <div class="layui-col-md12" style="margin-top: 20px;">
                              <div class="layui-card">
                                <div class="layui-card-header">任务关卡</div>
                                <div class="layui-card-body">
                                    <div class="layui-row">
                                        {if !empty($info['detail_list'])}
                                        {foreach $info['detail_list'] as $key => $detail}
                                        <div class="layui-col-md12">
                                            <div class="passList">
                                                <div class="subject">
                                                    <i class="layui-icon layui-icon-senior" style="color: rgb(1, 82, 217);"></i>
                                                </div>
                                                <div class="info">
                                                    
                                                    <div class="infoTitle">第{$key+1}关
                                                        <span>{$detail.title|default=''}</span>
                                                    </div>
                                                    <div class="infoScare">
                                                        <!-- <span>正在挑战<b>82人次</b></span> -->
                                                        <span>可获分数<b>{$detail.gold|default=0}分</b></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {/foreach}
                                        {/if}
                                    </div>
                                </div>
                              </div>
                            </div>
                          </div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-row layui-col-space15ml40">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                          <div class="layui-card-header font16" style="margin: 15px 0px;">所属课程</div>
                          <div class="layui-card-body">
                                <div>
                                    {if !empty($course_list) }
                                    {foreach $course_list as $key => $course}
                                    <div class="pathWrap">
                                        <a href="{:sysuri('index/practice.course/detail')}?id={$course.id|default=''}" target="_blank">
                                            <img alt="实训" src="{$course.logo|default=''}" class="pathImg">
                                        </a>
                                        <div class="pathContentWrap">
                                            <a href="{:sysuri('index/practice.course/detail')}?id={$course.id|default=''}" target="_blank" class="">{$course.title|default=''}</a>
                                        </div>
                                    </div>
                                    {/foreach}
                                    {/if}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {include file='/public/index-foot'}
</body>
<style type="text/css">
    .contentWrap {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        position: relative
    }
    .contentLeftWrap {
        display: flex;
        font-size: 14px;
        text-align: center
    }
    .mr30 {
        margin-right: 30px
    }
    .ml40 {
        margin-left: 40px;
    }
    .mt3 {
        margin-top: 3px
    }

    li,ol,ul {
        list-style-type: none
    }

    dl,ol,ul {
        margin-bottom: 0
    }

    .passList {
        align-items: flex-start;
        display: flex;
        justify-content: space-between;
        padding: 20px 0
    }
    .passList .info {
        flex: 1 1;
        margin-left: 20px
    }
    .passList .info .infoTitle {
        color: #333;
        font-size: 16px
    }
    .passList .info .infoScare {
        color: #999;
        font-size: 12px;
        margin-top: 10px
    }
    .passList .info .infoTitle span{
        margin-left: 20px;
    }
    .pathWrap {
        display: flex;
        margin-bottom: 20px
    }
    .pathImg {
        border-radius: 4px;
        height: 60px;
        width: 100px
    }
    .pathContentWrap {
        display: flex;
        flex: 1 1;
        flex-direction: column;
        justify-content: center;
        margin-bottom: -6px;
        margin-left: 10px
    }
    .infoScare span {
        margin-right: 30px;
    }
    .infoScare span b {
        color: #333;
        font-weight: 400;
        margin-left: 8px
    }
</style>
